<template>
	<div class="el-steps" :class="[
       !simple && 'el-steps--' + direction,
       simple && 'el-steps--simple'
     ]">
		<slot></slot>
	</div>
</template>

<script>
	import Migrating from 'element-ui/src/mixins/migrating';

	export default {
		name: 'ElSteps',

		mixins: [Migrating],

		props: {
			space: [Number, String],
			active: Number,
			direction: {
				type: String,
				default: 'horizontal'
			},
			alignCenter: Boolean,
			simple: Boolean,
			finishStatus: {
				type: String,
				default: 'finish'
			},
			processStatus: {
				type: String,
				default: 'process'
			}
		},

		data() {
			return {
				steps: [],
				stepOffset: 0
			};
		},

		methods: {
			getMigratingConfig() {
				return {
					props: {
						'center': 'center is removed.'
					}
				};
			}
		},

		watch: {
			active(newVal, oldVal) {
				this.$emit('change', newVal, oldVal);
			},

			steps(steps) {
				steps.forEach((child, index) => {
					child.index = index;
				});
			}
		}
	};
</script>
<style scoped>
	>>>.el-step.is-vertical .el-step__line {
		width: 2px !important;
		top: 20px !important;
		bottom: 0 !important;
		left: 15px !important;
	}
</style>